import React, { Component } from 'react';
import { View, Image, Text } from '@tarojs/components'
import { AtIcon, AtTabs, AtTabsPane } from 'taro-ui'
import Taro from '@tarojs/taro'
import axios from 'axios'
import qs from 'qs'
class newlist extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      currentTab: 0,
      current: 0,
      yiArr: [],
      imgurl: 'http://172.17.6.224:8085',
      arrOne: [],
      arrTwo: [],
      arrThree: [],
      arrFour: [],
      arrFive: []
    }
  }
  handleClick(value) {
    this.setState({
      current: value
    })
  }
  //跳转到详情
  toxiangqing(data) {
    Taro.navigateTo({
      url: '/pages/ShopDetail/ShopDetail?shopId=' + JSON.stringify(data)
    })
  }
  componentWillMount() {
    axios.get('/api/front/indexPage').then((res) => {
      if (res.data.code == 200) {
        let everyday;
        if (res.data.data.length > 0) {
          everyday = res.data.data.map(item => {
            return <View className='TabViewList' >
              <View className='listTu'>
                <Image className='lisImg'
                  src={this.state.imgurl + item.picOne}
                  onClick={this.toxiangqing.bind(this, item.goodsId)}></Image>
              </View>
              <View className='listTitle'>{item.goodsName}</View>
              <View className='listxx'>
                <Text className='xxleft'>￥{item.goodsRealPrice}</Text>
                <Text className='xxright'>
                  <AtIcon value='shopping-cart'></AtIcon>
                </Text>
              </View>
            </View>
          })
        } else {
          everyday = <View className='nono'>
            <AtIcon value='close-circle' size='30'></AtIcon>
        暂时没有奥~~~ </View>
        }
        this.setState({
          yiArr: everyday
        })
        // console.log(this.newARR)
      } else {
        console.log(res.data.msg)
      }
    })
    this.getArr('5G手机', 'arrOne')
    this.getArr('连衣裙', 'arrTwo')
    this.getArr('男装', 'arrThree')
    this.getArr('衬衫', 'arrFour')
    this.getArr('女包', 'arrFive')
  }
  //获得第二部分数据
  getArr(name, arrName) {
    let groupName = name
    axios.post('/api/front/indexGroup', qs.stringify({
      groupName: groupName
    }), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then((res) => {
      if (res.data.code == 200) {
        let arr;
        if (res.data.data.length > 0) {
          arr = res.data.data.map((item) => {
            return <View className='TabViewList'>
              <View className='listTu'>
                <Image
                  className='lisImg'
                  src={this.state.imgurl + item.picOne}
                  onClick={this.toxiangqing.bind(this, item.goodsId)}></Image>
              </View>
              <View className='listTitle'>{item.goodsName}</View>
              <View className='listxx'>
                <Text className='xxleft'>￥{item.goodsRealPrice}</Text>
                <Text className='xxright'>
                  <AtIcon value='shopping-cart'></AtIcon>
                </Text>
              </View>
            </View>
          })
        } else {
          arr = <View className='nono'>
            <AtIcon value='close-circle' size='30'></AtIcon>
          暂时没有奥~~~ </View>
        }

        this.setState({
          [arrName]: arr
        })
      }

    })
  }

  checkTab = (data) => {
    this.setState({
      currentTab: data,
      yiArr: this.state.yiArr.reverse()
    })
  }
  render() {
    const tabList = [{ title: '5G手机' }, { title: '箱包' }, { title: '家电' }, { title: '手机' }, { title: '钟表珠宝' }]
    return (
      <View>
        <View className='tab'>
          <View className={this.state.currentTab === 0 ? 'tabtt activeTab' : 'tabtt'} onClick={() => { this.checkTab(0) }}>每日上新</View>
          <View className={this.state.currentTab === 1 ? 'tabtt activeTab' : 'tabtt'} onClick={() => { this.checkTab(1) }}>销量排行</View>
        </View>
        {/* 第一部分tab栏 */}
        <View className='tabview'>
          {this.state.yiArr}
        </View>
        {/* 第二部分tab栏 */}
        <View>
          <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
            <AtTabsPane current={this.state.current} index={0} >
              <View className='tabview'>
                {this.state.arrOne}
              </View>
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={1}>
              <View className='tabview'>
                {this.state.arrTwo}
              </View>
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={2}>
              <View className='tabview'>
                {this.state.arrThree}
              </View>
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={3}>
              <View className='tabview'>
                {this.state.arrFour}
              </View>
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={4}>
              <View className='tabview'>
                {this.state.arrFive}
              </View>
            </AtTabsPane>
          </AtTabs>
        </View>
      </View>
    );
  }
}

export default newlist;